{% load static %}

{% include 'common/header.html' %}

<style>
body{
    background-color: #111F3B;
	  background-image:url('{% static 'assets/images/bg1.png' %}');
	  background-size: 100% auto; /* 宽度100%，高度自动 */
	  background-repeat: no-repeat; /* 背景图片不重复 */
	  background-position: center top; /* 背景图片居中顶部 */

}
</style>
    <div class="sitejumbo" style="">
            <div class="container">
                <div class="container" style="margin-top:20px;">
                    <div class="row">
                        <div class="col-md-12">
                           <!-- <div class="dashed-heading-jumbo">
                                <span>
                                    <a href="/doc/guide/2.0/en/start-installation" class="btn" style="background:#f2f9fa">Get Started</a>
                                </span>
                            </div> -->
                        </div>
                    </div>
                </div>


                <div class="panel panel-default" style="background:none;border:none;margin-top:20px;">
                                    <div class="panel-body" >




                                        <div class="mini-search-form" action="/search" method="get" style="margin-top:0;box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);border:1px solid #ACC0E1;border-radius: 30px;">
                                        <input type="hidden" name="version" value="2.0">
                                           <div class="flex   "  style="">
                                                <div  class="flex-1" style="position: relative;border-radius: 4px;

                                                ">
                                                    <input type="hidden" name="type" value="extension">
                                                    <input type="text" class="form-control" style="height:40px;border:0;box-shadow:8px;border:0;border-radius: 30px; border-top-right-radius: 0;border-bottom-right-radius: 0;" name="keyword" v-model="keyword"
                                                     placeholder="Search …" autocomplete="off" aria-label="Search box">

                                                    </div>

                                                    <button   @click="submit()" type="button" class="searchbtn "
                                                    style="background:#ffffff;

                                                    background-repeat: no-repeat; background-size: 60%;
                                                    background-position: 30% 50%;
                                                     display:block; padding: 20px;width: 30px;height:30px;box-shadow:none;border:0;
                                                     border-radius: 30px;border-top-left-radius: 0;border-bottom-left-radius: 0;">
                                                    </button>
                                            </div>
                                        </div>
                                        <div class="flex-row  f-j-start items-center    " style="margin-top:20px;margin-left:10px;">
{#                                            <div class="flex   "  style="margin-right:20px">#}
{##}
{#                                                <text class="" style="color:#ffffff">Example:</text>#}
{#                                            </div>#}


                                            {% for ex in example_links  %}
                                                  <div class="flex   "  style="margin-right:20px;text-decoration: underline;"
                                                        @click="jump(item.path)"
                                                        v-for="item,index in exampleArray">
                                                        <text class="" style="cursor: pointer;color:#ffffff"  >{{ex.title}}</text>
                                                    </div>
                                            {% endfor %}





                                        </div>

{#                                        <div class="flex-row   search_tabs   mt20 mb20" style="">#}
{##}
{#                                                {% for category in categories %}#}
{##}
{#                                                     <div class="flex-col justify-start items-center tabs_text "  style=""#}
{#                                                                            @click="selectCateMethod(index)"#}
{#                                                                            :class="{'tabs_text_active':cateArray_index.includes(index) }"#}
{#                                                                            v-for="item,index in cateArray">#}
{#                                                                            {{category}}#}
{#                                                                        </div>#}
{#                                                {% endfor %}#}
{##}
{##}
{##}
{#                                            <ketcher @confirmed="handleConfirmed" style="" :showEdit="showEdit"></ketcher>#}
{#                                        </div>#}


                                    </div>

{#<div class="enterez-container">#}
{#  <div class="enterez-options">#}
{#    <label class="enterez-option">#}
{#      <input type="checkbox" name="enterez" value="1">#}
{#      <span class="enterez-text">Use Enterez</span>#}
{#    </label>#}
{##}
{#    <label class="enterez-option">#}
{#      <input type="radio" name="enterez" value="2">#}
{#      <span class="enterez-text">Use Enterez</span>#}
{#    </label>#}
{##}
{#    <label class="enterez-option">#}
{#      <input type="radio" name="enterez" value="3">#}
{#      <span class="enterez-text">Use Enterez</span>#}
{#    </label>#}
{##}
{#    <label class="enterez-option">#}
{#      <input type="radio" name="enterez" value="4">#}
{#      <span class="enterez-text">Use Enterez</span>#}
{#    </label>#}
{#  </div>#}
{#</div>#}

<style>
.enterez-container {
  padding: 10px;
  background: rgba(0,0,0,0.8);
}

.enterez-options {
  display: flex;
  align-items: center;
  gap: 15px;
}

.enterez-option {
  display: flex;
  align-items: center;
  cursor: pointer;
}

.enterez-text {
  color: #fff;
  margin-left: 5px;
  font-size: 14px;
}

input[type="checkbox"],
input[type="radio"] {
  width: 16px;
  height: 16px;
  cursor: pointer;
}
</style>

<script>
$(document).ready(function() {
  // 单选框点击事件
  $('.enterez-option input[type="radio"]').click(function() {
    $('.enterez-option input[type="radio"]').not(this).prop('checked', false);
    $(this).prop('checked', true);
  });

  // 复选框点击事件
  $('.enterez-option input[type="checkbox"]').click(function() {
    if($(this).is(':checked')) {
      $('.enterez-option input[type="radio"]').prop('checked', false);
    }
  });
});


$(document).ready(function() {
  // 单选框点击事件
  $('.enterez-option input[type="radio"]').click(function() {
    $('.enterez-option input[type="radio"]').not(this).prop('checked', false);
    $(this).prop('checked', true);
  });

  // 复选框点击事件
  $('.enterez-option input[type="checkbox"]').click(function() {
    if($(this).is(':checked')) {
      $('.enterez-option input[type="radio"]').prop('checked', false);
    }
  });
});




</script>
<div class="container row">
    <div class="flex-col justify-start align-items-start "  style="padding:10px 20px;color:#ffffff;opacity: 0.6" >
    Quickly fnd chemical information from authoritative sources
    </div>
</div>





<!-- 添加一个隐藏的input用于存储返回值 -->
<input type="hidden" id="moleculeData" name="moleculeData">

<!-- 模态框 -->
<div id="ketcherModal" class="modal">
  <div class="modal-content">
    <span class="close">&times;</span>
    <iframe class="frame" id="idKetcher"
            src="{% static 'ketcher-standalone-v2.6.4/standalone/index.html' %}"
            width="100%" height="600" style="border:0;"></iframe>
    <div class="modal-footer">
      <button type="button" class="btn btn-secondary close-btn">取消</button>
      <button type="button" class="btn btn-primary" id="confirmKetcher">确认</button>
    </div>
  </div>
</div>

<style>
.modal {
  display: none;
  position: fixed;
  z-index: 1000;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0,0,0,0.4);
}

.modal-content {
  background-color: #fefefe;
  margin: 5% auto;
  padding: 20px;
  border: 1px solid #888;
  width: 80%;
  max-width: 900px;
}

.modal-footer {
  padding: 15px 0 0;
  text-align: right;
}

.close {
  color: #aaa;
  float: right;
  font-size: 28px;
  font-weight: bold;
  cursor: pointer;
}

.btn {
  padding: 6px 12px;
  margin-left: 10px;
  border-radius: 4px;
  cursor: pointer;
    font-size:16px !important;
    border-radius: 10px;
    color: #fff !important;
    background:#1C2B4B !important;
}

.btn-primary {
  background-color: #007bff ;
  color: white;
  border: none;
}

.btn-secondary {
  background-color: #6c757d;
  color: white;
  border: none;
}
</style>

<script>
document.addEventListener('DOMContentLoaded', function() {
  const modal = document.getElementById('ketcherModal');
  const btn = document.getElementById('showKetcherBtn');
  const span = document.getElementsByClassName('close')[0];
  const closeBtn = document.getElementsByClassName('close-btn')[0];
  const confirmBtn = document.getElementById('confirmKetcher');
  const moleculeDataInput = document.getElementById('moleculeData');

  // 打开模态框
  btn.onclick = function() {
    modal.style.display = 'block';
  }

  // 关闭模态框函数
  function closeModal() {
    modal.style.display = 'none';
  }

  // 关闭按钮事件
  span.onclick = closeModal;
  closeBtn.onclick = closeModal;

  // 点击模态框外部关闭
  window.onclick = function(event) {
    if (event.target == modal) {
      closeModal();
    }
  }

  // 确认按钮点击事件
  confirmBtn.onclick = async function() {
    try {
      // 获取iframe中的Ketcher实例
      const ketcher = document.getElementById('idKetcher').contentWindow.ketcher;

      // 获取分子数据
      const molData = await ketcher.getSmiles();

      // 将数据存储到隐藏input中
      moleculeDataInput.value = molData;

      // 触发自定义事件，通知页面数据已更新
      const event = new CustomEvent('moleculeDataUpdated', {
        detail: { molData }
      });
      document.dispatchEvent(event);

      // 关闭模态框
      closeModal();
    } catch (error) {
      console.error('获取分子数据失败:', error);
      alert('获取分子数据失败，请重试');
    }
  }
});

// 监听分子数据更新事件
document.addEventListener('moleculeDataUpdated', function(e) {
  const molData = e.detail.molData;
  console.log('获取到的分子数据:', molData);
  // 这里可以添加您的处理逻辑
});
</script>








 <div class="nav-container">
     <!-- 添加打开按钮 -->
    <div class="nav-item"  id="showKetcherBtn" >

      <div class="icon-wrapper" >
             <a href="javascript:void(0)"> <img src="{% static 'assets/images/index/i1.png' %}" alt="结构" /> </a>
      </div>
           <a href="javascript:void(0)"> <span class="nav-text">Draw Structure</span> </a>

    </div>
    
    <div class="nav-item">

      <div class="icon-wrapper">
           <a href="/submit"><img src="{% static 'assets/images/index/i2.png' %}" alt="上传" /></a>
      </div>
        <a href="/submit"> <span class="nav-text">Submit</span></a>
    </div>
    
    <div class="nav-item">

      <div class="icon-wrapper">
             <a href="/browse"> <img src="{% static 'assets/images/index/i3.png' %}" alt="浏览" /></a>
      </div>
          <a href="/browse">  <span class="nav-text">Browse Data</span></a>
    </div>
    
{#    <div class="nav-item">#}
{#      <div class="icon-wrapper">#}
{#        <img src="{% static 'assets/images/index/i4.png' %}" alt="周期表" />#}
{#      </div>#}
{#      <span class="nav-text">Periodic Table</span>#}
{#    </div>#}
  </div>

                </div>



               <div class="row" >
                </div>
            </div>

            <div class="container">
                <div id="Glide" class="glide glide--carousel glide--horizontal">
                    <div class="glide__wrapper">

                    </div>
                 </div>
            </div>
    </div>

<div class="container row " style="margin:0 auto;margin-top:40px;">
      <div class="stats-container">
                                            <div class="stats-row">
                                              <div class="stats-item">
                                                <div class="stats-number">119M</div>
                                                <div class="stats-label">Compounds</div>
                                              </div>
                                              <div class="stats-item">
                                                <div class="stats-number">119M</div>
                                                <div class="stats-label">Compounds</div>
                                              </div>
                                              <div class="stats-item">
                                                <div class="stats-number">119M</div>
                                                <div class="stats-label">Compounds</div>
                                              </div>
                                              <div class="stats-item">
                                                <div class="stats-number">119M</div>
                                                <div class="stats-label">Compounds</div>
                                                    <a href="#" class="stats-link">See More Statistics ></a>
                                              </div>
                                              <div class="stats-item">
                                                <div class="stats-number">119M</div>
                                                <div class="stats-label">Compounds</div>
                                              </div>
                                              <div class="stats-item" style="border-left:1px solid #6BA6FF;padding-left:20px">
                                                <div class="stats-number">31M</div>
                                                <div class="stats-label">visits science 2025.01s</div>
                                                    <a href="#" class="stats-link">See More Statistics ></a>
                                              </div>
                                            </div>
{#                                            <div class="stats-links">#}
{##}
{#                                              <a href="#" class="stats-link">See More Statistics ></a>#}
{#                                            </div>#}
     </div>
</div>



	<div class="  container_box">


		<div class=" container row" style="margin:0 auto">



			<div class="con_container">


				    <div  class="video"  style="width:400px;height:330px;float: right;  opacity: 0.8; margin-left: 20px; margin-bottom: 0px;">

				    </div>


			    <div class="content"  style="   text-align: justify; text-indent: 0;padding-top:0px;">
					<h2 style="font-size: 20px;font-weight: bold;color:#000000">About MolGlueDB</h2>
			    <p>Molecular glue (MG), together with PROTAC are the two major fields of targeted protein degradation (TPD) that hijack intracellular
                    ubiquitin-proteasome system (UPS) to selectively effect proximity-induced protein degradation, and represents a novel and enticing therapeutic strategy
                    with intrinsic advantages over traditional inhibition methods. MG possesses much more concise molecular structure than PROTAC, and this brings great opportunity</p>
			    </div>
			</div>




		</div>


	</div>





 <style>

 .stats-container{display:flex;flex-direction:column;align-items:center;padding:20px;background:#fff;border-radius:10px;box-shadow:0 2px 8px rgba(0,0,0,0.1)}
.stats-row{display:flex;justify-content:space-between;width:100%;}
.stats-item{display:flex;flex-direction:column;align-items:center;flex:1;padding:10px 0}
.stats-number{font-size:22px;font-weight:bold;color:#6ba6ff;margin-bottom:5px}
.stats-label{font-size:13px;color:#666}
.stats-links{display:flex;justify-content:space-between;width:100%}
.stats-link{color:#1890ff;text-decoration:none;font-size:14px}
.stats-link:hover{text-decoration:underline}

.nav-container{display:flex;justify-content:flex-start;align-items:center;gap:40px;padding:20px}
.nav-item{display:flex;flex-direction:column;align-items:center;cursor:pointer}
.icon-wrapper{width:60px;height:60px;display:flex;justify-content:center;align-items:center;margin-bottom:8px}
.icon-wrapper img{width:60px;height:60px}
.nav-text{font-size:14px;text-align:center;color:#ffffff}
.nav-item:hover{opacity:0.8}
</style>




{% include 'common/footer.html' %}

